<template>
  <div id="building">
    <div style="width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center">
      <div style="width: 300px; height: 450px;box-shadow: 0 5px 15px rgba(0, 0, 0, .8); display: flex;justify-content: center;align-items: center;">
        <el-form status-icon :model="form" size="normal" style="height: 100% ;width: 220px;" ref="form" :rules="rules">
          <div style="width: 100%;height: 40px;margin-top:10px;line-height: 40px;text-align: center">
            <span style="color: #60bae3;font-weight: 900;font-size: 30px;">Register</span>
          </div>
          <el-form-item style="margin-top: 20px" prop="phone">
            <el-input v-model.number="form.phone" prefix-icon="el-icon-user-solid" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item prop="confirm">
            <el-input v-model="form.confirm" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item prop="agree">
            <el-checkbox v-model="form.agree">我已阅读并同意用户协议</el-checkbox>
          </el-form-item>
          <el-form-item >
            <el-button style="color: white; border-radius: 30px;width: 100%;height: 50px;background: linear-gradient(90deg,#3cadeb,#9c88ff);" @click="register">注册</el-button>
          </el-form-item>
          <el-form-item style="text-align: center; color: white;">
            <a @click="toLogin" style="color: #60bae3;font-size: 16px;font-weight: 500;opacity: 0.8;text-decoration: underline">返回登录</a>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import qs from 'qs';

export default {
  name: "Register",
  data(){
    var checkPhone = (rule, value, callback) =>{
      // console.log('this.form.phone :>> ', this.form.phone);
      if(!value){
        return callback(new Error('手机号码不能为空'));
      }
      setTimeout(() => {
        request.get("/user/getUserByPhone",{
          params:{
            phone:this.form.phone
          }
        }).then(res =>{
          console.log('res.code :>> ', res.code);
          if(res.code == '200'){
            callback(new Error("用户名已存在，请重新输入"))
          }else{
            callback()
          }
        })
      },1000)
    setTimeout(()=>{
      if(!Number.isInteger(value)){
        callback(new Error('请输入数字值'));
      }
    },1000);
    }
    var checkAgree = (rule, value, callback)=>{
      if(value){
        callback()
      }else{
        callback(new Error('请勾选同意协议'))
      }
    }
    return{
      form:{},
      rules: {
        phone: [
          { trigger: 'blur',validator: checkPhone},
          // { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        confirm: [
          { required: true, message: '请输入验证密码', trigger: 'blur' },
        ],
        agree:[
          { trigger: 'blur',validator: checkAgree},
        ]
      },
    }
  },
  methods:{
    
    phoneRules(){
      
    },
    toLogin(){
      this.$router.push("/login")
    },
    register(){
      if (this.form.password !== this.form.confirm){
        this.$message({
          type: "error",
          message: "两次密码输入不一致"
        })
        return;
      }

      this.$refs['form'].validate((valid) => {
        console.log('this.form.phone :>> ', this.form.phone);
        if (valid) {
          const data =  qs.stringify(this.form)
          request.post("/user/register",data).then(res => {
            console.log(res);
            if (res.code=='200'){
              this.$message({
                type: "success",
                message: "注册成功"
              })
              this.$router.push("/login");//注册成功后的页面跳转
            }else {
              this.$message({
                type: "error",
                message: res.msg
              })
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    }
  }
}
</script>

<style scoped>
  #building{
    width:100%;
    height:100%;
    position:fixed;
    /* margin-left: 15%; */
    background-size:100% 100%;
    background: url(../static/undraw_join_of2w.svg) no-repeat;
    background-size:cover;  /**让背景图基于容器大小伸缩**/
    /* background-attachment:fixed;  */
      
  }
</style>